<template>
  <div  class="list-component">
    <el-form class="search-bar" :inline="true" :model="filter" >
      <el-form-item label="角色名称">
        <el-input v-model="filter.name" placeholder="请输入角色名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="getRoleList">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="list">
      <div class="button-bar">
        <el-button class="btn" type="primary" size="mini" icon="el-icon-plus" @click="onAddRole" v-pms="'roleEdit'">新建</el-button>
        <el-button class="btn" type="warning" size="mini" icon="el-icon-edit" @click="onEditRole"  v-pms="'roleEdit'">编辑</el-button>
        <el-button class="btn" type="danger" size="mini" icon="el-icon-delete" @click="onDeleteRole"  v-pms="'roleDelete'">删除</el-button>
        <el-button class="btn" type="danger" size="mini" @click="setpermission" >权限配置
			<el-tooltip class="item" placement="top" effect="dark" content="若要立即生效需要重新登录">
			    <span class="el-icon-question"></span>
			</el-tooltip>
		</el-button>
      </div>
      <div class="data">
        <el-table :data="roleList.data" ref="roleList"  stripe @select-all="onSelectAll" @select="onSelect" v-height="'auto'" >
          <el-table-column type="selection"  align="center"  width="50" ></el-table-column>
          <el-table-column type="index" label="序号" prop="index" align="center" width="60px" ></el-table-column>
          <el-table-column label="角色名称" prop="name"   align="center" width=""></el-table-column>
          <el-table-column label="角色描述" prop="remark"  align="center"  width=""></el-table-column>
          <el-table-column label="创建时间" prop="createTime"  align="center"  width=""></el-table-column>
          <el-table-column label="创建人" prop="createByName"   align="center" width=""></el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog  :title="optType"   :visible.sync="showDialog" >
      <component v-bind:is="curComponent" @closeDialog="closeDialog" :editData="editData" :roleTypeDict="roleTypeDict"   @update="getRoleList"></component>
    </el-dialog>
    <permissionDialog ref="permissionDialog" :initData="initData" :pmsTree="pmsTree"></permissionDialog>
  </div>
</template>
<script>
  import editRole from './edit-role.vue'
  import permissionDialog from './permission.vue'
  export default {
    components:{editRole,permissionDialog},
    data(){
      return{
        filter: {
          name:'',
        },
        roleList:{
          data:[]
        },
        selected:[],
        editData:{},
        optType:'新增角色',//新增角色/编辑角色/导入/导出
        showDialog:false,
        curComponent:'editRole',//当前组件，editRole/导入/到处...
        initData:"",
		pmsTree:[],
		roleTypeDict:[]
      }
    },
    methods:{
      getRoleList(pageNum){
        if(this.$refs.roleList){
            this.selected=[];
            this.$refs.roleList.clearSelection();
        }
        var submitData={
          ...this.filter,
        };
        this.$http.getRoleList(submitData)
          .then((res)=>{
            var data=res.data.data ||[];
			this.roleList.data=data
          }).catch((err)=>{
            throw(err)
        })
      },


      //添加角色
      onAddRole(){
        this.$refs.roleList.clearSelection();
        this.optType="新建角色";
        this.showDialog=true
        this.$nextTick(()=>{
          this.selected=[];
          this.editData={}
        })
      },

      //编辑角色
      onEditRole(index,row){
        if(this.selected.length>1){
          this.$message.warning("只能选中一个");
          return
        }else if(this.selected.length===0){
          this.$message.warning("请选中要编辑的角色");
          return
        }
        this.optType="编辑角色";
        this.showDialog=true
        this.$nextTick(()=>{
          this.editData=this.selected[0]
        })
      },

      //删除角色
      onDeleteRole(index,row){
        if(this.selected.length==0){
            this.$message.warning("请选中要删除的角色!")
            return
        }else if(this.selected.length>1){
			this.$message.warning("目前仅支持一个一个删除!")
			return
		}
		
		this.$confirm('请确认是否删除?', '警告', {
		   confirmButtonText: '确定',
		   cancelButtonText: '取消',
		   type: 'warning'
		 }).then(() => {
				let ids=this.selected.map((item)=>{
				  return item.id
				});
				let id=this.selected[0].id
				let submitData={roleId:id,moduleName:"角色管理"}
				this.$http.deleteRole(submitData)
				  .then((res)=>{
					this.$message.success("删除成功!")
					this.getRoleList()//重新加载列表
				  }).catch((err)=>{
					throw(err)
				})
		 })
      },

      //权限配置
      setpermission(){
        if(this.selected.length>1){
          this.$message.warning("只能选中一个");
          return
        }else if(this.selected.length===0){
          this.$message.warning("请选中要配置的角色");
          return
        }
        this.$refs.permissionDialog.showDialog=true
        this.$nextTick(()=>{
          this.initData=this.selected[0].id
        })
      },
	  
	  //请求菜单数据
	  getPmsTree(){
	    var _this=this;
	    this.$http.getPmsTree()
	    .then(res=>{
	        this.pmsTree = res.data.data ||[];
	    }).catch(err=>{
	        throw(err)
	    })
	  },
	  

      //全选
      onSelectAll(selection){
        this.selected=selection
      },
      //选择
      onSelect(selection,row){
        this.selected=selection
      },

      closeDialog(bool){
        this.showDialog=bool
      },
	  
	  getRoleType(){
		  this.$http.getDictKeyList({parentCode:'roleType'})
		  .then((res)=>{
			  this.roleTypeDict=res.data.data ||[]
		  }).catch((err)=>{
			  throw(err)
		  })
	  }


    },
    created(){
	  this.getRoleType()
	  this.getPmsTree()
	  this.getRoleList()
    }

  }
</script>
<style scoped="">
	.icon-quanxian{
		margin-right: 5px;
		font-size: 14px;
	}
</style>

